<template>
	<view class="weather-container" :class="'bg-' + background + '-gradient'">
		<cu-custom :isBack="true" url="../index/index">
			<block slot="backText">返回</block>
			<block slot="content">天气查询</block>
		</cu-custom>
		<view class="weather-content">
			<view class="weather-header">
				<view class="header-location" @click="handleToggle">
					<text class="text-gray cuIcon-locationfill" style="margin-right: 5px;"></text>
					{{ currentCityInfo.adm1 }}
					<template v-if="currentCityInfo.name">
						<text class="text-gray cuIcon-playfill play"></text>
						{{ currentCityInfo.name }}
					</template>
				</view>
				<view class="header-timer" v-if="weatherInfo.obsTime">{{ weatherInfo.obsTime | formatTime }}更新</view>
			</view>
			<view class="today-weather">
				<image v-if="weatherInfo.icon" :src="imgUrl + (weatherIcon[weatherInfo.text]||weatherInfo.icon) + 'd.png'" mode="widthFix" class="weather-icon"></image>
				<view class="weather-number">
					<view class="weather-centigrade" v-if="weatherInfo.temp">
						<text class="weather-temp">{{ weatherInfo.temp }}</text>
						<text class="weather-unit ">°</text>
					</view>
					<view class="weather-descipt" v-if="weatherInfo.text">
						<text class="weather-text">{{ weatherInfo.text }}</text>
						<text class="weather-quality">{{ airInfo.category }}</text>
					</view>
				</view>
			</view>
			<view class="weather-recent-list">
				<view class="weather-recent-item" v-for="(item, index) in recentList" :key="index">
					<view class="weather-recent-item-date">{{ item.fxDate | formatDate }}</view>
					<image :src="imgUrl + item.iconDay + 'd.png'" mode="widthFix" class="small-icon"></image>
					<view class="weather-recent-item-range">
						<text class="weather-number">
							{{ item.tempMin }}
							<text class="weather-unit ">°</text>
						</text>
						<text class="split">/</text>
						<text class="weather-number">
							{{ item.tempMax }}
							<text class="weather-unit ">°</text>
						</text>
					</view>
				</view>
			</view>
			<view class="life-list">
				<view class="cu-list grid col-3 no-border" style="background-color: unset;">
					<view class="cu-item" v-for="(item, index) in lifeList" :key="index" style="margin-bottom: 10px;">
						<view class="iconfont icon" :class="'icon-' + lifeIcon[item.name]"></view>
						<text class="life-list-item-text">{{ item.category }}</text>
					</view>
				</view>
			</view>
		</view>
		<notice-bar :text="warnInfo" color="#ffffff" bgColor="#f56c6c" :duration="18"></notice-bar>
	</view>
</template>

<script>
const { weatherIconUrl } = require('@/config/constant.js');
import { getLocation } from '@/utils/localtion.js';
import { getWeatherNow, getAirNow, getThreeDay, getWarningNow, getLifeIndex } from '@/api/tianqi.js';
import { getDiffTime, getDate } from '@/utils/index.js';
import NoticeBar from '@/components/NoticeBar/index.vue';
export default {
	components: { NoticeBar },
	data() {
		return {
			background: '',
			weatherInfo: {},
			airInfo: {},
			recentList: [],
			hourList: [],
			lifeList: [],
			warnInfo: '',
			imgUrl: weatherIconUrl,
			lifeIcon: {
				运动指数: 'yundong',
				穿衣指数: 'chuanyi',
				旅游指数: 'lvyou',
				舒适度指数: 'shushi',
				感冒指数: 'ganmao',
				空调开启指数: 'kongtiao'
			},
			weatherIcon:{
				阴:104,
				多云:101,
				晴:100,
				小雨:305,
			},
			currentLocationName: '',
			from: ''
		};
	},
	computed: {
		currentCityInfo() {
			return this.$store.state.currentCity;
		}
	},
	filters: {
		formatTime(val) {
			if (!val) return '';
			return getDiffTime(val);
		},
		formatDate(val) {
			if (!val) return '';
			if (val == getDate()) return '今天';
			const datelist = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
			return datelist[new Date(val).getDay()];
		}
	},
	onLoad(e) {
		this.background = e.background || 'weather';
		this.from = e.from;
	},
	onShow() {
		if (this.from) {
			this.init();
			return;
		}
		getLocation()
			.then(res => {
				const data = res.data;
				if (data.location && data.location.length > 0) {
					this.$store.commit('SET_CITY_INFO', data.location[0]);
					this.currentLocationName = this.currentCityInfo.name;
				}
			})
			.finally(() => {
				this.init();
			});
	},
	methods: {
		init() {
			this.getWeatherInfo();
			this.getAirInfo();
			this.getRecentList();
			this.getWarnInfo();
			this.getLifeList();
		},

		getWeatherInfo() {
			getWeatherNow({ location: this.currentCityInfo.id })
				.then(res => {
					const data = res.data || {};
					if (data.code == 200) {
						this.weatherInfo = data.now;
					} else {
						this.showError();
					}
				})
				.catch(() => {
					this.showError();
				});
		},

		getAirInfo() {
			getAirNow({ location: this.currentCityInfo.id })
				.then(res => {
					const data = res.data || {};
					if (data.code == 200) {
						this.airInfo = data.now;
					} else {
						this.showError();
					}
				})
				.catch(() => {
					this.showError();
				});
		},

		getRecentList() {
			getThreeDay({ location: this.currentCityInfo.id })
				.then(res => {
					const data = res.data || {};
					if (data.code == 200) {
						this.recentList = data.daily;
					} else {
						this.showError();
					}
				})
				.catch(() => {
					this.showError();
				});
		},

		getWarnInfo() {
			getWarningNow({ location: this.currentCityInfo.id })
				.then(res => {
					const data = res.data || {};
					if (data.code == 200) {
						this.warnInfo = data.warning[0] ? '重要通知：' + data.warning[0].text : '';
					} else {
						this.showError();
					}
				})
				.catch(() => {
					this.showError();
				});
		},

		getLifeList() {
			getLifeIndex({ location: this.currentCityInfo.id, type: '1,3,6,8,9,11' })
				.then(res => {
					const data = res.data || {};
					if (data.code == 200) {
						this.lifeList = data.daily;
					} else {
						this.showError();
					}
				})
				.catch(() => {
					this.showError();
				});
		},

		showError() {
			uni.showToast({
				title: '获取天气信息失败，请重新进入',
				icon: 'none'
			});
		},

		handleToggle() {
			uni.navigateTo({
				url: './search'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.weather-container {
	height: 100vh;
	.weather-content {
		.weather-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 0 15px;
			height: 50px;
			.header-location {
				color: #fff;
				.play {
					margin: 0 5px;
				}
			}
			.header-timer {
				color: #fff;
			}
		}
		.today-weather {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 15px;
			.weather-icon {
				width: 300rpx;
			}
			.weather-number {
				text-align: center;
				margin-left: 28px;
				.weather-centigrade {
					color: #fff;
					.weather-temp {
						font-size: 100rpx;
					}
					.weather-unit {
						font-size: 30px;
						vertical-align: 0.5em;
					}
				}
				.weather-descipt {
					color: #fff;
					margin-top: 5px;
					.weather-text {
						font-size: 18px;
						position: relative;
						&::after {
							position: absolute;
							content: '';
							background-color: rgb(192, 98, 42);
							height: 14px;
							width: 2px;
							right: -16px;
							top: 50%;
							transform: translateY(-50%);
						}
					}
					.weather-quality {
						font-size: 16px;
						margin-left: 32px;
					}
				}
			}
		}
		.weather-recent-list {
			margin-top: 10%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.weather-recent-item {
				text-align: center;
				.weather-recent-item-date {
					color: #fff;
					font-size: 16px;
				}
				.small-icon {
					margin: 5px 0;
					width: 58px;
				}
				.weather-recent-item-range {
					color: #fff;
					.weather-number {
						font-size: 18px;
					}
					.split {
						font-size: 17px;
						margin: 0 5px;
					}
					.weather-unit {
						font-size: 16px;
					}
				}
			}
		}
		.life-list {
			margin-top: 12%;
			.icon {
				font-size: 24px;
			}
			.life-list-item-text {
				font-size: 14px;
				color: #fff;
				margin-top: 8px;
			}
		}
	}
}
</style>
